<template>
    <div>
        <van-search
        v-model="value"
        show-action
        input-align="center"
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        @input="searchtap"/>
        
        <div class="search-but" v-show="value.trim().length">
            <li v-for="item in searchres" :key="item._id" @click="details(item.title)">{{item.title}}</li>
        </div>

        <div class="SearchResultsmain">
            <ul v-for="(item,index) in searchres" :key="item._id" >
                <router-link :to="{path:'/article',query:{'id':item._id,'text':item.title}}">
                    <li>
                        <van-image class='one'
                        fit="cover"
                        :src=item.imageSrc[0] />
                    </li>
                </router-link>
                    <li>
                        <p>{{item.title}}</p>
                        <p>{{item.author}}</p>
                        <p>
                            <em>
                                <svg class="tt-icon" aria-hidden="true">
                                    <use xlink:href="#icon-dianji"></use>
                                </svg>
                                <span> {{item.comment}}</span>
                            </em>
                            <em>
                                <svg class="tt-icon" aria-hidden="true">
                                    <use xlink:href="#icon-huifu"></use>
                                </svg>
                                <span> {{item.comment}}</span>
                            </em>

                            <em>
                                <svg class="tt-icon" aria-hidden="true" @click.stop="getshowShare(index)">
                                    <use xlink:href="#icon-gengduo-shuxiang"></use>
                                </svg>
                            </em>
                        </p>
                    </li>
            </ul>
        </div>
    </div>
</template>

<script>
let timeID=null
import { Search } from 'vant';
import { Tab, Tabs } from 'vant';
import { Image as VanImage} from 'vant';
export default {
    name: 'WorkspaceJsonSearchResults',
    components:{
        [Search.name]:Search,
        [Tab.name]:Tab,
        [Tabs.name]:Tabs,
        [VanImage.name]:VanImage,
    },
    data() {
        return {
            value: '',
            searchres:[],
            searchResultTap:[]
        };
    },
    
    computed:{
        keyWord(){return this.$route.query.title}
    },
    created() {
        // setTimeout(() => {
            this.qingqiu(this.keyWord)
        // }, 1000);
    },

    methods: {
        onSearch(val) {
          if(val.trim()==''){
            return this.value=''
          }
          console.log(val)
          this.qingqiu(val)
          this.value=''
          this.getlishijilu(val)
        },
        // 历史记录
        getlishijilu(val){
            this.searchResultTap=JSON.parse(localStorage.getItem('searchResultTap'))
            val=val.trim()
            let index=this.searchResultTap.findIndex(v=>v===val)
            console.log(index);
            if(index>=0){
                this.searchResultTap.splice(index,1)
            }
            this.searchResultTap.unshift(val)
            console.log( this.searchResultTap);
            localStorage.setItem('searchResultTap',JSON.stringify(this.searchResultTap))
        },
        onCancel() {
          this.$router.go(-1)
        },
        searchtap(val){
            if(!val.trim()==''){
                clearTimeout(timeID)
                timeID=setTimeout(()=>{
                    console.log(val);
                    
                    this.qingqiu(val)
                },500)
            }
        },
        qingqiu(val){
            console.log(val);
            console.log(this.$route.query.title);
            this.skip=0;
            this.limit=20
            this.$http.post('/api/search',{
                key_word:val||this.key_word,
                limit:20
            })
            .then(res=>{
                console.log(res);
                if(res.code==0){
                    this.searchres=res.data
                }
            })
        },
        details(title){
            this.title=title.trim()
            this.searchtap(title)
            this.value=''
            this.getlishijilu(title)
        }
    },
};
</script>

<style lang="scss" scoped>
 .search-but{
    position: fixed;
    left: 0;
    right: 0;
    top: 54px;
    bottom: 0;
    overflow-y: auto;
    background-color: #f4f4f4;
    z-index: 999;
    li{
        list-style: none;
        padding: 10px 0px;
        margin: 0 10px;
        border-bottom: 1px solid pink;
    }
   }  
   .SearchResultsmain{
    margin-top: 15vw;
    padding: 0 15px;
    ul{
        a{
            display: contents;
        }
        display: flex;
        li{
          width: 42vw;
            .one{
                height: 26vw;
                width: 38vw;
                img{
                width: 90vw;
                height: 90vw;
                }
          } 
          p{
            // 超出部分隐藏
            overflow: hidden;
            // 文本不换行
            white-space: nowrap;
            // 未显示的显示省略号
            text-overflow: ellipsis;
            
          }
          p:nth-child(1){
            height:12vw;
            font-size: 16px;
            padding-top: 2vw;
          }
          p:nth-child(2){
            height: 7vw;
            color: #9d9d9d;
            font-size: 14px;
            width: 36vw;
          }
          p:nth-child(3){
            display: flex;
            em{
                flex: 3;
                color: #9d9d9d;
                font-size: 14px;
                span{
                    font-size: 17px;
                }
                .tt-icon{
                    font-size: 21px;
                }
            }
            em:nth-child(3){
                text-align: right;
            }
          }
          
        }
    }
} 
</style>